<template>
  <ActionPanel>
    <ElSplitter>
      <ElSplitterPanel min="20%" max="60%" class="grid-box">
        <ElButton v-for="(template, k) in templates" :key="k" :type="current?.key === k ? 'primary' : ''" @click="select(k)">{{ template.label }}</ElButton>
      </ElSplitterPanel>
      <ElSplitterPanel class="flex">
        <ElSplitter layout="vertical">
          <ElSplitterPanel size="30%" class="p5px">
            {{ current?.comment }}
          </ElSplitterPanel>
          <ElSplitterPanel class="p5px">
            <div v-for="(v, k) in current?.value" :key="k" class="flex">
              <ElText truncated class="w45%">{{ k }}</ElText>:<ElText truncated class="w-45%">{{ v }}</ElText>
            </div>
          </ElSplitterPanel>
        </ElSplitter>
      </ElSplitterPanel>
    </ElSplitter>
    <template #footer>
      <ElButton type="primary" :disabled="!current" @click="choose">选择</ElButton>
    </template>
  </ActionPanel>
</template>
<script setup lang="ts">
  import { closePopupKey } from '@/components/Popup';
  import { ElButton, ElSplitter, ElSplitterPanel, ElText } from 'element-plus';
  import { inject, ref } from 'vue';
  import { templates } from '..';
  import { ActionPanel } from '@/components/ActionPanel';

  const emits = defineEmits(['choose'])

  const close = inject<() => void>(closePopupKey, void 0)

  const current = ref()
  function select(key) {
    current.value = templates[key]
    current.value.key = key
  }

  function choose() {
    emits('choose', current?.value.value)
    close?.()
  }
</script>
<style lang="less" scoped>
  .grid-box {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: 35px;
    grid-auto-columns: repeat(8, minmax(0, 1fr));
    grid-auto-rows: 35px;
  }
</style>